<template>
     <div class="jx-big">    
         <div class="jx-info">
            <h3 class="fl">基本信息</h3>
        </div>
        <div class="forms fl">
            <div class="forms">
                <el-form :model="form" :rules="rules" ref="form" >
                    <el-form-item label="工号" prop="userNumber" style="width:80%;"   v-if="roleId=='TEACHER' || roleId=='ADMIN' || roleId=='SUPER_ADMIN' || roleId=='UNIVERSITY_TEACHER' || roleId=='MARKET_TEACHER' || roleId=='INTERNET_ADMIN' " >
                        <el-input type="text" v-model="form.number" auto-complete="new-oldpassWord" :disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label="学号" prop="userNumber" style="width:80%;"  v-if="roleId=='STUDENT'" >
                        <el-input type="text" v-model="form.number" auto-complete="new-oldpassWord" :disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name" style="width:80%;" v-if="roleId=='STUDENT'">
                        <el-input type="text" v-model="form.name" auto-complete="new-password"  :disabled="true"></el-input>
                    </el-form-item>
                     <el-form-item label="姓名" prop="name" style="width:80%;" v-if="roleId=='TEACHER'  || roleId=='UNIVERSITY_TEACHER' || roleId=='MARKET_TEACHER' ||  roleId=='INTERNET_ADMIN' ||  roleId=='SUPER_ADMIN' || roleId=='ADMIN' ">
                        <el-input type="text" v-model="form.name" auto-complete="new-password"  ></el-input>
                    </el-form-item>
                    <el-form-item label="角色"  prop="roled" style="width:80%;"  v-if="roleId=='ADMIN' || roleId=='SUPER_ADMIN' || roleId=='INTERNET_ADMIN'">
                        <el-input type="text" v-model="form.roled" auto-complete="new-checkPass" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号"   style="width:80%;" >
                        <el-input type="text" v-model="form.telephone" auto-complete="new-checkPass" maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱"  style=" position:relative" maxlength="20"  v-if="roleId=='TEACHER' || roleId=='STUDENT' || roleId=='UNIVERSITY_TEACHER' || roleId=='MARKET_TEACHER' ">
                        <el-input type="text" v-model="form.email" auto-complete="new-checkPass"></el-input>
                        <div class="switchflag " v-if="roleId=='TEACHER' || roleId=='UNIVERSITY_TEACHER' || roleId=='MARKET_TEACHER'">
                            <el-switch
                            v-model="form.switch"
                            active-color="#13ce66">
                            </el-switch>
                            <el-tooltip class="item" effect="dark" content="学生端的邮箱信息的隐藏/显示" placement="bottom-start">
                                <i class="iconfont icon-wenti-m"></i>
                            </el-tooltip>
                        </div>
                    </el-form-item>
                    <el-form-item label="性别"   style="width:80%; "  v-if="roleId=='TEACHER' || roleId=='STUDENT'|| roleId=='UNIVERSITY_TEACHER' ||  roleId=='MARKET_TEACHER'">
                         <el-radio-group v-model="form.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div class="button-style savefn" @click="saveFns('form')" >保 存</div>
                </el-form>
           </div>
        </div>
        <div class="photo fl" v-if="roleId=='TEACHER' || roleId=='STUDENT' || roleId=='UNIVERSITY_TEACHER' ||  roleId=='MARKET_TEACHER' ">
             <p>头像</p>
             <div class="imgphoto">
                <img :src="iconUrl"/>
             </div>
             <span class="changeimgs" @click="changepic">更换头像</span>
        </div>
         <el-dialog :close-on-click-modal="false" title="更换头像" :visible.sync="dialogFormVisible" width="750px"  class="changeimglist"  v-if="roleId=='TEACHER' || roleId=='STUDENT' || roleId=='UNIVERSITY_TEACHER' ||  roleId=='MARKET_TEACHER'">
            <div class="changeimg">  
               <div class="fl changeimg-left">
                   <p>推荐头像</p>
                    <ul >
                        <li v-for="(item,index) in tablelist " :key="index">
                            <img :src="item.keyValuePath" @click="change(item.keyValue,item.keyValuePath)" :class="{'img-boder': isActive==item.keyValue}"/>
                            <i class="iconfont" :class="{'icon-zhengque': isActive==item.keyValue}"></i>
                        </li> 
                    </ul>
               </div>
               <div class="fl changeimg-right">
                    <p>效果预览</p>
                    <div class="show">
                        <img :src="bigimg"/>
                    </div>
               </div>
            </div>
            <div class="button-style save" @click="save()" >确 定</div>
         </el-dialog>
    </div>
</template>

<script>
    export default {
        data () {
             //邮箱
            var validateEmail = (rule, value, callback) => {
                    if (value === '') {
                    callback(new Error('请正确填写邮箱'));
                    } else {
                    if (value !== '') { 
                        var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                        if(!reg.test(value)){
                        callback(new Error('请输入有效的邮箱'));
                        }
                    }
                      callback();
                    }
            }
            return {
                imgurl:'',
                bigimg:'',
                isActive:'',
                dialogFormVisible:false,
                //头像名字
                iconUrl:'',
                //角色
                 roleId:'',
                 form: {
                    number: '',
                    name: '',
                    telephone: '',
                    email:'',
                    sex:'',
                    switch:'',
                    roled:'',
                },
                tablelist:[],
                //表单验证
				rules: {
                    email: [
                        { max: 20, message: '邮箱长度最多20个字符', validator: validateEmail, trigger: 'blur' }
                    ],	
                }
            }
        },
        created() {
           // this.roleId=1//从本地获取角色
            this.roleId = this.$store.state.user.roles[0]
            this.init()
        },
        methods: {
            Picimg(){
                let self = this
                self.$http.get('/tes/unauthorized/config?keys=userIcon').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         //console.log(res.data.userIcon)
                        self.tablelist=res.data.userIcon
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            init(){
                let self = this
                self.$http.get('/tes/user/info').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        this.form.number=res.data.userNumber
                        this.form.name=res.data.name
                        this.form.telephone=res.data.telephoneNumber
                        this.form.email=res.data.email
                        this.form.sex = res.data.sexName
                        this.form.switch=res.data.showEmail
                        this.iconUrl=res.data.iconPath
                        this.imgurl =res.data.icon
                        this.form.roled=res.data.roleName
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //图片确定
            save(value){
              this.iconUrl=this.bigimg
              this.dialogFormVisible=false
              this.imgurl =this.isActive
            },
            //更换头像
            changepic(){
              this.dialogFormVisible=true
              this.Picimg()
              this.bigimg=this.iconUrl
              this.isActive=this.imgurl
            },
            //切换头像
            change(value,src){
               this.isActive=value;
               this.bigimg=src
            },
            //保存
            saveFns(form){
                this.$confirm('确定保存吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.$http.put('/tes/user/info',{
                            name:this.form.name,
                            telephoneNumber: this.form.telephone,
                            email: this.form.email,
                            showEmail: this.form.switch,
                            icon: this.imgurl,
                            sexName: this.form.sex 
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                }) 
                                if(this.roleId=='TEACHER' || this.roleId=='UNIVERSITY_TEACHER' || this.roleId=='MARKET_TEACHER' || this.roleId=='STUDENT' ){
                                     window.location.reload() //强制刷新
                                }
                               
                            }else{
                                this.$message.error(res.message)
                            }
                        })
                    }
                }).catch(err => {
                     console.log(err)
                 })
              })
            }
        },
    }
</script>
<style scoped>
.forms>>>.el-form-item{
     margin-bottom: 50px;
}
   .el-input>>>.el-input__inner{
        width: 280px;
        height: 38px;
        line-height: 38px;
    }
   .el-select>>>.el-input__inner{
       width: 280px;
        height: 38px;
        line-height: 38px;
   }
 
</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
.jx-big {
    padding-left: 50px;
    padding-top: 20px;
    .jx-info{
        overflow: hidden;
        &>h3{
            height: 32px;
            line-height: 32px;
            font-size: $fs18
        }
    }
    .forms{
        margin: 18px 0;
        width: 400px;
        .savefn{
            margin:20px 30px 20px 0;
        }
        .switchflag{
            position: absolute;
            left: 298px;
            top: 42px;
            .icon-wenti-m{
                font-size: $fs14;
                margin-left: 10px;
                color: #385899;
                &:hover{
                    color: #385899;
                    cursor: pointer;
                }
            }
        }
    }
    .photo{
        margin-top: 60px;
        margin-left: 20px;
        .imgphoto{
            margin: 20px 0;
             width: 130px;
             height: 130px;
            &>img{
                 width: 130px;
                 height: 130px;
                 border-radius: 50%;
            }
        }
        .changeimgs{
            border: 1px solid #d9d9d9;
            display: block;
            width: 118px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
            margin-left: 5px;
            cursor: pointer;
        }
       
    }
    .changeimg{
         margin: 0 20px;
         overflow: hidden;
         padding-bottom: 20px;
        .changeimg-left{
            border-right: 1px solid #d9d9d9;
            width: 360px;
            &>ul>li{
                float: left;
                position: relative;
                width:70px;
                height: 70px;
                margin-right: 15px;
                margin-top: 10px;
                &>img{
                    width: 70px;
                    height: 70px;
                }
                .icon-zhengque{
                    position: absolute;
                    color: #3fdb9b;
                    background: #fff;
                    bottom: 7px;
                    width: 14px;
                    height: 7px;
                    right: 6px;
                    
                }
                &>.img-boder{
                     border: 1px solid #77aae6;
                }
            }
        }
        .changeimg-right{
            width: 200px;
            margin-left: 50px;
            .show{
                margin: 20px 0;
                &>img{
                   width: 100px;
                   height: 100px;
                }
            }
        }
    }
    .save{
        text-align: center;
        margin: 20px auto;
        clear: both;
        width: 70px;
        display: block
    }
}
</style>